
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="UTF-8">
    <title>注册</title>
    <link rel="stylesheet" href="../../js/layui/css/layui.css">
    <script src="../../js/jquery-3.4.1.js"></script>
    <script src="../../js/layui/layui.all.js"></script>
    <style>
        .register-container {
            width: 400px;
            margin: 100px auto;
            padding: 20px;
            border: 1px solid #e2e2e2;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        .register-container h2 {
            text-align: center;
            margin-bottom: 20px;
        }
        .register-container .layui-form-item {
            margin-bottom: 15px;
        }
        .register-container .layui-form-item .layui-input-block {
            margin-left: 0;
        }
        .register-container .layui-form-item .layui-form-label {
            width: auto;
        }
    </style>
</head>
<body>
<div class="register-container">
    <h2>注册</h2>
    <form class="layui-form" id="registerForm">
        <div class="layui-form-item">
            <label class="layui-form-label">用户名</label>
            <div class="layui-input-block">
                <input type="text" name="username" required lay-verify="required" placeholder="请输入用户名" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">邮箱</label>
            <div class="layui-input-block">
                <input type="email" name="email" required lay-verify="email" placeholder="请输入邮箱" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">密码</label>
            <div class="layui-input-block">
                <input type="password" name="password" required lay-verify="required" placeholder="请输入密码" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">确认密码</label>
            <div class="layui-input-block">
                <input type="password" name="confirmPassword" required lay-verify="required|confirmPass" placeholder="请确认密码" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="register" id="registerBtn">注册</button>
            </div>
        </div>
    </form>
</div>
<script>
    layui.form.verify({
        confirmPass: function(value) {
            if (value !== $('input[name="password"]').val()) {
                return '两次密码输入不一致';
            }
        }
    });

    layui.use('form', function() {
        let form = layui.form;

        // 注册按钮防止重复点击
        let registerBtn = $('#registerBtn');
        registerBtn.prop('disabled', false);

        form.on('submit(register)', function(data) {
            if (!registerBtn.prop('disabled')) {
                registerBtn.prop('disabled', true);
                setTimeout(function() {
                    registerBtn.prop('disabled', false);
                }, 5000);

                // 注册接口
                $.ajax({
                    type: 'POST',
                    url: '/enroll',  // 假设这是你的注册接口
                    data: {
                        username: data.field.username,
                        email: data.field.email,
                        password: data.field.password
                    },
                    success: function(response) {
                        if (response.code === 200) {
                            layer.msg(response.msg, {
                                icon: 6,
                                time: 1000
                            }, function(){
                                parent.document.getElementById('view_frame').src = "./page/public/login.jsp";
                            })
                        } else {
                            layui.layer.msg(response.msg, {icon: 2});
                        }
                    }
                });
            }
            return false;
        });
    });
</script>
</body>
</html>
